<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 实测实量统计分析 -->
    <a-card :bordered="false">
      <!-- 责任区域和工程类别 -->
      <a-spin :spinning="spinning">
        <a-tabs :activeKey="activeTab" @change="switchSummary">
          <a-tab-pane v-for="item in tabList" :key="item.projectTypeId" :tab="item.projectTypeName"></a-tab-pane>
        </a-tabs>
      </a-spin>
      <!-- 表格 -->
      <s-table
        ref="table"
        tableLayout="fixed"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
        style="background: #fff"
      >
        <template v-if="!record.children" slot="action" slot-scope="text, record">
          <a @click="handleManage(record)">查看</a>
        </template>
      </s-table>
    </a-card>
    <!-- 页脚操作栏 -->
    <div class="btn_box page-btn-right-top">
      <a-button type="primary" @click="$multiTab.close()">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { projectType } from '@/api/quality/currency'
import { count } from '@/api/quality/reality' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    STable,
  },
  data() {
    return {
      spinning: false, // 工程类别加载控件
      // 当前tab
      activeTab: '2',
      // 项目id
      projectId: '',
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let args = {
          projectId: this.projectId,
        }
        // 若为责任区域和点位类型
        if (this.activeTab == 2 || this.activeTab == 4) {
          args.type = this.type ? 4 : this.activeTab
          args[{ 2: 'respAreaNodeId', 3: 'partId' }[this.type || this.activeTab]] = this.id
        } else {
          // 若为工程类别
          args.type = this.type ? 4 : 3
          args.projectTypeId = this.activeTab
        }
        return count.getDetail(args).then((res) => {
          return res
        })
      },
      // tab面板
      tabList: [
        {
          projectTypeName: '责任区域',
          projectTypeId: '2',
        },
      ],
    }
  },
  computed: {
    columns() {
      let columns = [
        {
          title: this.type
            ? '点位类型名称'
            : this.activeTab == 2
            ? '责任区域'
            : this.activeTab == 4
            ? '点位类型名称'
            : '分部分项',
          dataIndex: 'name',
        },
        {
          title: '点位数',
          dataIndex: 'pointNo',
        },
        {
          title: '已测量数',
          dataIndex: 'measuringNo',
        },
        {
          title: '合格数',
          dataIndex: 'qualifiedCount',
        },
        {
          title: '合格率',
          dataIndex: 'passRate',
        },
      ]
      // 若tab不为点位类型，则添加操作栏
      if (this.activeTab != 4 && !this.type) {
        columns.push({
          title: '操作',
          dataIndex: 'actions',
          width: '120px',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        })
      }
      return columns
    },
  },
  mounted() {
    if (!this.id) {
      this.getTitle()
    } else {
      this.activeTab = this.type
      this.tabList = [
        {
          projectTypeName: this.name,
          projectTypeId: this.type,
        },
      ]
    }
  },
  methods: {
    /**
     * 查看
     */
    handleManage(record) {
      this.$router.push({
        name: '/quality/measuredAmount/statisticalAnalysis/statisticalAnalysisDetail',
        query: {
          id: record?.id,
          name: record?.name,
          type: this.activeTab != 2 && this.activeTab != 4 ? 3 : this.activeTab,
          projectId: this.projectId,
        },
      })
    },
    /**
     * 获取工程类别列表
     */
    getTitle() {
      this.spinning = true
      projectType
        .getList({ id: this.projectId })
        .then((res) => {
          this.spinning = false
          this.tabList = this.tabList.concat(res.data, [
            {
              projectTypeName: '按点位类型统计',
              projectTypeId: '4',
            },
          ])
        })
        .catch(() => {
          this.spinning = false
        })
    },
    /**
     * 切换汇总信息
     */
    switchSummary(e) {
      this.activeTab = e
      this.$refs.table.refresh(true)
    },
  },
}
</script>
<style scoped>
.btn_box {
  position: fixed;
  bottom: 0;
  right: 50px;
  height: 50px;
  display: flex;
  align-items: center;
}
</style>